<template>
  <div class="recentlyPlay">
  <el-menu
  @select="handleSelect"
  :default-active="activeIndex"
  class="el-menu-demo CollectBar"
  mode="horizontal"
  text-color="#001"
  active-text-color="rgb(191, 178, 210)">
  <el-menu-item index="1">单曲</el-menu-item>
  <el-menu-item index="2">歌单</el-menu-item>
  <el-menu-item index="3">专辑</el-menu-item>
</el-menu>
<component  v-bind:is="currentTabComponent"></component>
  </div>
</template>

<script>
import songListRow from '@/components/songListRow.vue';
import songline from '../../components/songline.vue';
import single from './child/single.vue';
import songList from './child/songList.vue';
import album from './child/album.vue';
export default {
    components:{
      songListRow,
      songline,
      single,
      songList,
      album
    },
    data: function () {
        return {
            activeIndex: "1",
            currentTabComponent: "single",
            opList: ['single', 'songList', 'album']
        }
    },
    methods: {
        handleSelect(key, keyPath) {
        this.$data.currentTabComponent = this.$data.opList[key-1]
        },
    }
}
</script>

<style>

</style>